<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'

// 任务列表组件

interface Task {
  id: number
  message: string
  isCompleted: boolean
  category: string
  selected?: boolean  
  isEditing?: boolean  
  editTemp?: string 
}

const props = defineProps({
  activeTodos: {
    type: Array<Task>,
    required: true
  },
  completedTodos: {
    type: Array<Task>,
    required: true
  }
})

const emit = defineEmits([
  'toggle-complete', 
  'remove-todo', 
  'start-edit', 
  'save-edit', 
  'cancel-edit',
  'update-task-selected'
])

const isEditingAny = ref(false)

const startEdit = (task: Task) => {
  if (isEditingAny.value) {
    props.activeTodos.forEach(t => {
      if (t.isEditing) emit('cancel-edit', t)
    })
    props.completedTodos.forEach(t => {
      if (t.isEditing) emit('cancel-edit', t)
    })
  }
  emit('start-edit', task)
  isEditingAny.value = true
  setTimeout(() => {
    const editInput = document.querySelector(`.edit-input-${task.id}`) as HTMLInputElement
    if (editInput) editInput.focus()
  }, 100)
}

const saveEdit = (task: Task) => {
  emit('save-edit', task)
  isEditingAny.value = false
}

const cancelEdit = (task: Task) => {
  emit('cancel-edit', task)
  isEditingAny.value = false
}

const handleTaskSelected = (task: Task, e: Event) => {
  const target = e.target as HTMLInputElement
  emit('update-task-selected', task.id, target.checked)
}
</script>

<template>
  <div class="tasks-wrapper">
    <!-- 未完成任务区域 -->
    <section class="task-group">
      <h2 class="group-title">未完成</h2>
      <ul v-if="activeTodos.length" class="task-list">
        <li class="task-item" v-for="item in activeTodos" :key="item.id">
          <input 
            type="checkbox" 
            :checked="item.selected" 
            @change="handleTaskSelected(item, $event)"
            class="task-checkbox" 
            @click.stop 
          />
          <div class="task-info">
            <span class="task-category">{{ item.category }}</span>
            <!-- 非编辑状态 -->
            <div v-if="!item.isEditing" class="task-text" @dblclick="startEdit(item)">
              {{ item.message }}
            </div>
            <!-- 编辑状态 -->
            <div v-else class="edit-container">
              <input
                type="text"
                :class="['edit-input', `edit-input-${item.id}`]"
                :value="item.editTemp"
                @input="(e) => { 
                  const target = e.target as HTMLInputElement
                  if (target) item.editTemp = target.value 
                }"
                @blur="saveEdit(item)"
                @keydown.enter="saveEdit(item)"
                @keydown.esc="cancelEdit(item)"
                placeholder="请输入任务内容"
              />
              <button class="edit-save-btn" @click="saveEdit(item)">保存</button>
              <button class="edit-cancel-btn" @click="cancelEdit(item)">取消</button>
            </div>
          </div>
          <div class="task-actions">
            <!-- 新增编辑按钮 -->
            <button class="edit-btn" @click="startEdit(item)" aria-label="编辑任务">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            
            <button class="complete-btn" @click="emit('toggle-complete', item.id)" aria-label="标记完成">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
              </svg>
            </button>
            <button class="delete-btn" @click="emit('remove-todo', item.id)" aria-label="删除任务">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M6 19C6 20.1046 6.89543 21 8 21H16C17.1046 21 18 20.1046 18 19V7H6V19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M19 4H15.5L14.5 3H9.5L8.5 4H5V6H19V4Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
        </li>
      </ul>
      <p v-else class="empty-state">暂无待办任务，添加一个开始吧~</p>
    </section>

    <!-- 已完成任务区域 -->
    <section class="task-group completed">
      <h2 class="group-title">已完成</h2>
      <ul v-if="completedTodos.length" class="task-list">
        <li class="task-item" v-for="item in completedTodos" :key="item.id">
          <input 
            type="checkbox" 
            :checked="item.selected" 
            @change="handleTaskSelected(item, $event)"
            class="task-checkbox" 
            @click.stop 
          />
          <div class="task-info">
            <span class="task-category">{{ item.category }}</span>
            <!-- 非编辑状态 -->
            <div v-if="!item.isEditing" class="task-text completed-text" @dblclick="startEdit(item)">
              {{ item.message }}
            </div>
            <!-- 编辑状态 -->
            <div v-else class="edit-container">
              <input
                type="text"
                :class="['edit-input', `edit-input-${item.id}`]"
                :value="item.editTemp"
                @input="(e) => { 
                  const target = e.target as HTMLInputElement
                  if (target) item.editTemp = target.value 
                }"
                @blur="saveEdit(item)"
                @keydown.enter="saveEdit(item)"
                @keydown.esc="cancelEdit(item)"
                placeholder="请输入任务内容"
              />
              <button class="edit-save-btn" @click="saveEdit(item)">保存</button>
              <button class="edit-cancel-btn" @click="cancelEdit(item)">取消</button>
            </div>
          </div>
          <div class="task-actions">
            <button class="edit-btn" @click="startEdit(item)" aria-label="编辑任务">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            
            <button class="complete-btn" @click="emit('toggle-complete', item.id)" aria-label="取消完成">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="10" fill="currentColor"/>
                <path d="M8 12L10.5 14.5L16 9" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            <button class="delete-btn" @click="emit('remove-todo', item.id)" aria-label="删除任务">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M6 19C6 20.1046 6.89543 21 8 21H16C17.1046 21 18 20.1046 18 19V7H6V19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M19 4H15.5L14.5 3H9.5L8.5 4H5V6H19V4Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
        </li>
      </ul>
      <p v-else class="empty-state">尚未完成任何任务，加油！</p>
    </section>
  </div>
</template>